<template>
  <div class="home-page" v-show="bol">
    <!-- tab栏
    van-tabs
       v-model="索引/name的值"
    
     -->
    <van-tabs animated v-model="activeIndex">
      <van-tab
        v-for="item in list"
        :key="item.id"
        :title="item.name"
        :name="item.id"
      >
        <ArticleList :id="item.id"></ArticleList>
        <!-- 可维护性强
        不要一个vue文件写大量代码：500行代码  
        1：item组件
        2：列表中使用item组件
         -->
      </van-tab>
    </van-tabs>
    <!-- 按钮 -->

    <div class="btn-wrapper">
      <geek-icon name="search"></geek-icon>
      <!--  父传子
              props
            子传父
               绑定  
                  子组件标签  @子组件方法名=‘父组件方法’
                触发
                  子组件内  this.$emit('子组件方法名')
             native修饰符
               .enter  .stop  .prevent
             .native:让组件能直接使用原生方法           
           el-input  @keyup.enter.native
            -->
      <geek-icon name="channel" @click.native="iconClick"></geek-icon>
    </div>
    <!-- 弹框组件 
    获取子组件实例对象
      子组件  ref="xxx"
      this.$refs.xxx===子组件的this,可修改子组件属性  

      目标：渲染我的频道
         1：传频道列表数据
            传   子组件标签  :属性名=”父组件属性“
         2：接收
           收  props:['list']
             props:{
               type:[Array,Object],
               default:
                 基本数据(Number,String,Boolean,undefined,null)类型直接定义 '123'
                 复杂数据(Array,Object,Function)：()=>{return 复杂数据类型}

             }
         3：渲染 
           父传子
              子组件  属性名=值
              子组件内 接收  渲染 

      父传子
    -->
    <!-- @update:activeIndex="activeIndex = $event" -->
    <ArticleChannel
      :activeIndex.sync="activeIndex"
      ref="ArticleChannel"
      :list="list"
    ></ArticleChannel>
  </div>
</template>
<script>
import { channels } from '@/api/home.js'
import ArticleList from './components/article-list.vue'
import ArticleChannel from './components/article-channel.vue'
export default {
  name: 'Home',
  components: {
    ArticleList,
    ArticleChannel
  },
  data () {
    return {
      list: [],
      activeIndex: 0,
      bol: true
    }
  },
  /*
    登陆与不登陆区别  token在变化 ，如果token变化了就调用接口
   watch:侦听器：侦听某个值的变化
     this.$store.state.user.token
*/
  watch: {
    '$store.state.user.token': {
      async handler (newVal) {
        if (newVal) {
          // this.list = []
          // this.bol = false
          const res = await channels()
          this.list = res
          // 登录后点击回来回到第一个选项
          this.activeIndex = this.list[0].id
          // this.bol = true
        }
      }
    }
  },

  async created () {
    const res = await channels()
    // console.log('首页res', res)
    this.list = res
    this.activeIndex = this.list[0].id
    // localStorage.setItem('userChannels', JSON.stringify(this.list))
    // console.log('首页频道列表:', res)
  },
  activated () {
    // console.log('home activated')
  },
  deactivated () {
    // console.log('home deactivated', this.$route)
  },
  methods: {
    iconClick () {
      // 打开弹框组件
      this.$refs.ArticleChannel.isShow = true
    }
  }
}
</script>
<style lang="less" scoped>
::v-deep .van-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-tabs__line {
    background: @geek-color;
    height: 2px;
    width: 32px;
  }
  .van-tab {
    color: #9ea1ae;
  }
  .van-tab--active {
    font-size: 18px;
    color: #333;
  }
  .van-tabs__wrap {
    padding-right: 86px;
  }
  .van-tabs__content {
    flex: 1;
    overflow: hidden;
  }
  .van-tab__pane {
    height: 100%;
  }
}
.home-page {
  .btn-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 86px;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    .geek-icon {
      flex: 1;
      text-align: center;
      font-size: 18px;
    }
    &::before {
      content: '';
      width: 20px;
      height: 44px;
      position: absolute;
      left: -20px;
      top: 0;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    }
  }
}
</style>
